<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/jquery.fullPage.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div id="fullPage">
    <div class="section section1">
        <h1>它，终于来了。</h1>
        <p>为了充分发挥体积小巧以及佩戴于手腕的优势，Apple Watch带来全新的科技和互动方式。它可以让你更快速便捷地完成一些早已习惯的事，也<br/>可实现过去根本无法企及的新功能。因此，这将会是焕然一新的使用体验，也将实现与你前所未有的贴近。</p>
        <div class="link-box">
            <a href="#">进一步了解</a>
        </div>
    </div>
    <div class="section section2">
        <h1>真正与你贴近的个人设备</h1>
        <div class="link-box">
            <a href="#">进一步了解</a>
        </div>
    </div>
    <div class="section section3">
        <h1>非同一般的精准计时</h1>
        <p>高级手表向来以计时精准为本，Apple Watch更是如此。它与iPhone配合使用，同全球标准时间的误差不超过50毫秒。而且，你可以对<br/>表盘进行个性化设定，以更具个性和意义的方式显示时间，使其更贴近你的生活和日程需要。</p>
        <div class="link-box">
            <a href="#">进一步了解计时</a>
        </div>
    </div>
    <div class="section section4">
        <h1>在三个特点鲜明的系列中找到你的风格</h1>
        <div class="row">
            <div class="col">
                <div class="pic-box primary">
                    <img src="images/primary_large_2x.jpg"/>
                </div>
                <div class="apple-box">
                    <img src="images/apple.png"/>
                    <span>WATCH</span>
                </div>
                <p>不锈钢或深空黑色不锈钢表壳，蓝宝石水晶镜面，搭配多款时尚表带。</p>
                <div class="link-box">
                    <a href="#">了解更多</a>
                </div>
            </div>
            <div class="col">
                <div class="pic-box sport">
                    <img src="images/sport_large_2x.jpg"/>
                </div>
                <div class="apple-box">
                    <img src="images/apple.png"/>
                    <span>WATCH</span>
                    <span style="font-weight: normal;">SPORT</span>
                </div>
                <p>银色或深空灰色的阳极氧化铝金属外壳，强化 Icon-X 玻璃，搭配靓丽柔<br/>韧的表带。</p>
                <div class="link-box">
                    <a href="#">了解更多</a>
                </div>
            </div>
            <div class="col">
                <div class="pic-box edition">
                    <img src="images/edition_large_2x.jpg"/>
                </div>
                <div class="apple-box">
                    <img src="images/apple.png"/>
                    <span>WATCH</span>
                    <span style="font-weight: normal;">EDITION</span>
                </div>
                <p>18K 黄金或玫瑰金表壳，蓝宝石水晶镜面，搭配精雕细琢的表带及表<br/>扣。</p>
                <div class="link-box">
                    <a href="#">了解更多</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/move.js"></script>
<script>
    $('#fullPage').fullpage({
        verticalCentered:false,
        navigation:true,
        navigationPosition:'right',
        scrollingSpeed:500,
        continuousVertical:true,
        afterRender:function(){
            move('.section h1').scale(1.5).duration('0.5s').end();
            move('.section p').set('margin-top','5%').duration('0.5s').end();
        },
        afterLoad:function(anchorLink,index){
            switch(index){
                case 1:
                    move('.section1 h1').scale(1.5).duration('0.5s').end();
                    move('.section1 p').set('margin-top','5%').duration('0.5s').end();
                    break;
                case 2:
                    move('.section2 h1').scale(0.7).duration('0.5s').end();
                    break;
                case 3:
                    move('.section3 h1').set('margin-left','0%').duration('0.5s').end();
                    move('.section3 p').set('margin-left','0%').duration('0.5s').end();
                    break;
                case 4:
                    move('.section4 .primary').rotate(360).duration('0.5s').end(function(){
                        move('.section4 .sport').rotate(360).duration('0.5s').end(function(){
                            move('.section4 .edition').rotate(360).duration('0.5s').end();
                        });
                    });
                    break;
            }
        },
        onLeave:function(index,nextIndex,direction ){
            switch(index){
                case 1:
                    move('.section1 h1').scale(1).duration('0.5s').end();
                    move('.section1 p').set('margin-top','900px').duration('0.5s').end();
                    break;
                case 2:
                    move('.section2 h1').scale(1).duration('0.5s').end();
                    break;
                case 3:
                    move('.section3 h1').set('margin-left','-150%').duration('0.5s').end();
                    move('.section3 p').set('margin-left','150%').duration('0.5s').end();
                    break;
                case 4:
                    move('.section4 .primary').rotate(-360).duration('0.5s').end();
                    move('.section4 .sport').rotate(-360).duration('0.5s').end();
                    move('.section4 .edition').rotate(-360).duration('0.5s').end();
                    break;
            }
        }
    });
</script>
</html>